<script setup lang="ts">
type NodeHandleRoundSourcePropsType = {
  // handle 是否显示
  show?: boolean
  // handle 颜色
  color?: string
  // handle 背景颜色在 handle 颜色基础上的透明度
  bgOpacity?: number
}

import { Handle, Position } from '@vue-flow/core'
import tinycolor2 from 'tinycolor2'

withDefaults(defineProps<NodeHandleRoundSourcePropsType>(), {
  show: false,
  color: '#333',
  bgOpacity: 0.3
})
</script>

<template>
  <div class="s-node-handle-round-source">
    <slot />
    <Handle
      class="s-node-handle-round-source-top"
      :style="{
        background: tinycolor2(color).setAlpha(bgOpacity).toRgbString(),
        opacity: show ? 1 : 0
      }"
      id="top"
      type="source"
      :position="Position.Top"
    />
    <Handle
      class="s-node-handle-round-source-right"
      :style="{
        background: tinycolor2(color).setAlpha(bgOpacity).toRgbString(),
        opacity: show ? 1 : 0
      }"
      id="right"
      type="source"
      :position="Position.Right"
    />
    <Handle
      class="s-node-handle-round-source-bottom"
      :style="{
        background: tinycolor2(color).setAlpha(bgOpacity).toRgbString(),
        opacity: show ? 1 : 0
      }"
      id="bottom"
      type="source"
      :position="Position.Bottom"
    />
    <Handle
      class="s-node-handle-round-source-left"
      :style="{
        background: tinycolor2(color).setAlpha(bgOpacity).toRgbString(),
        opacity: show ? 1 : 0
      }"
      id="left"
      type="source"
      :position="Position.Left"
    />
  </div>
</template>

<style lang="scss">
.s-node-handle-round-source {
  position: relative;

  .s-node-handle-round-source-top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
  }

  .s-node-handle-round-source-right {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(100%, -50%);
  }

  .s-node-handle-round-source-bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
  }

  .s-node-handle-round-source-left {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-100%, -50%);
  }
}
</style>
